<template>
  <h1>我是Vue3</h1>
  <h2>{{name}}</h2>
  <h2>{{job.type}}</h2>
  <h2>{{job.salary}}</h2>
  <button @click="say">点我修改名字</button>
</template>

<script>
  import { ref } from 'vue'
  //引用对象
  export default {
    setup() {
      let name = ref('张三')
      //创建ref响应对象类型
      let job = ref({
        type: '前端',
        salary: '3k'
      })//处理响应式对象时用的是proxy代理


      //通过原型对象的getter和setter修改数据


      function say() {
        name.value = '李四'
        console.log(name);
        //对象怎么修改响应式数据
        job.value.type = '外卖员';
        job.value.salary = '5k';
      }
      // - JS中操作数据： ```xxx.value```
      // - 模板中读取数据: 不需要.value，直接：```<div>{{xxx}}</div>```


      return {
        name, say, job
      }
    }
  }
</script>

<style>

</style>